<template>
	<div>
      <el-form ref="form" :disabled="true" :model="form" size="mini" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务创建" prop="createTime">
              {{form.createTime}} 由 {{form.createBy}} 创建
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <div style="float:right;">
              <el-button
                    :class="addItem.review?'active dis_active':'active'"
                    type="text"
                    @click="addItem.review=true"
                >任务复核</el-button>
                <el-button
                :class="addItem.copy?'active dis_active':'active'"
                    type="text"
                    @click="addItem.copy=true"
                >任务抄送</el-button>
            </div> -->
          </el-col>
        </el-row>
        <el-form-item label="任务名称" prop="taskName">
          {{form.taskName}}
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="安检类型" prop="safetyCheckOpt">
              {{safetyCheckOpt}}
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安检模板" prop="safetyTemplateOpt">
                <el-select multiple v-model="form.safetyTemplateOptArray" placeholder="请选择安检模板"
                    size="small" class="form_short">
                  <el-option
                    v-for="dict in safetyTemplateOptOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id + ''"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :span="12" v-if="form.safetyCheckOpt!=3">
            <el-form-item label="检查对象">
            <div class="select_view">
                <el-select :value="selectCheckTargetOrgs" @clear="clearSelect('checkTargetOrgs')"
									size="small" multiple placeholder="请选择检查对象" clearable class="form_long"></el-select>
                <!-- <ChooseOrgan @chooseUsers ="setCheckTargetOrgs" ></ChooseOrgan> -->
            </div>
            </el-form-item>
        </el-row>
        <el-form-item label="检查人员" v-if="form.safetyCheckOpt!=3">
          <div class="select_view">
            <el-select :value="selectCheckUsers" @clear="clearSelect('checkUsers')"
							size="small" multiple placeholder="请选择检查人员" clearable class="form_long"></el-select>
            <!-- <ChooseUser @chooseUsers ="setCheckUsers" ></ChooseUser> -->
          </div>
        </el-form-item>
        <el-form-item label="任务复核" v-if="selectReviewUsers.length">
          <div class="select_view">
            <el-select :value="selectReviewUsers" @clear="clearSelect('reviewUsers')"
							size="small" multiple placeholder="请选择任务抄送" clearable class="form_long"></el-select>
            <!-- <ChooseUser @chooseUsers ="setReviewUsers" ></ChooseUser> -->
          </div>
        </el-form-item>
        <el-form-item label="任务抄送" v-if="selectCopyToUsers.length">
          <div class="select_view">
            <el-select :value="selectCopyToUsers" @clear="clearSelect('copyToUsers')"
							size="small" @remove-tag="removeSelect" multiple placeholder="请选择任务抄送" clearable class="form_long"></el-select>
            <!-- <ChooseUser @chooseUsers ="setCopyToUsers" ></ChooseUser> -->
          </div>
        </el-form-item>
        <el-row v-if="form.safetyCheckOpt!=3"></el-row>
          <el-col :span="12">
            <el-form-item label="任务周期" prop="taskCycleOpt">
              {{taskCycleOpt}}
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周期频次" prop="checkFrequencyOpt">
                {{checkFrequencyOpt}}
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务开始" prop="startDate">
              {{form.startDate}}
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束" prop="endDate">
                {{form.endDate}}
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改报告" prop="rectificationTypeOpt">
              {{rectificationTypeOpt}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改期限" prop="rectificationPeriod">
              {{form.rectificationPeriod}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="任务详情" prop="taskDescription">
          {{form.taskDescription}}
        </el-form-item>
        <el-form-item label="任务附件">
          <UploadCom ref="upload"
          @submitData="submitData"
          disabled
          description="点击选择需要上传的文件"
          :userFileList="fileList"
          class="form_long" />
        </el-form-item>
      </el-form>
	</div>
</template>
<script>
import { listLabsafetyCheckIndex } from "@/api/labsafety/labsafetyCheckIndex";
import { addLabsafetyForm, updateLabsafetyForm } from "@/api/labsafety/labsafetyForm";
import ChooseUser from "../../safetyCompents/check_user.vue"
import ChooseOrgan from "../../safetyCompents/choose_organ.vue"
import UploadCom from "@/views/labdata/commons/upload.vue"
export default {
  name: "CreateDialog",
  components: {ChooseUser, ChooseOrgan, UploadCom},
	props: {
		form: Object
	},
  data() {
    return {
			checkTargetOrgs: [],
      checkUsers: [],
			reviewUsers: [],
      copyToUsers: [],
      // 安全检查单表格数据
      labsafetyFormList: [],
      // 安检类型字典
      safetyCheckOptOptions: [],
      // 任务周期字典
      taskCycleOptOptions: [],
      // 整改报告字典
      rectificationTypeOptOptions: [],
      // 安检模板字典
      safetyTemplateOptOptions: [],
      // 周期版次字典
      checkFrequencyOptOptions: [],
      addItem: {
        review: false, //任务复核
        copy: false //任务抄送
      },
      fileList: [],
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getDicts("safetyCheckOpt").then(response => {
      this.safetyCheckOptOptions = response.data;
    });
    this.getDicts("taskCycleOpt").then(response => {
      this.taskCycleOptOptions = response.data;
    });
    this.getDicts("rectificationTypeOpt").then(response => {
      this.rectificationTypeOptOptions = response.data;
    });
    // this.getDicts("safetyTemplateOpt").then(response => {
    //   this.safetyTemplateOptOptions = response.data;
    // });
    this.getDicts("checkFrequencyOpt").then(response => {
      this.checkFrequencyOptOptions = response.data;
    });

		listLabsafetyCheckIndex().then(response => {
      this.safetyTemplateOptOptions = response.rows
		});
  },
  computed: {
      safetyCheckOpt() {
        const obj = this.safetyCheckOptOptions.find(item => item.dictValue == this.form.safetyCheckOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
      },
      taskCycleOpt() {
        const obj = this.taskCycleOptOptions.find(item => item.dictValue == this.form.taskCycleOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
      },
      checkFrequencyOpt() {
        const obj = this.checkFrequencyOptOptions.find(item => item.dictValue == this.form.checkFrequencyOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
      },
      rectificationTypeOpt() {
        const obj = this.rectificationTypeOptOptions.find(item => item.dictValue == this.form.rectificationTypeOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
      },
      selectCheckTargetOrgs() {
        return this.checkTargetOrgs.map(item => item.orgName)
      },
      selectCheckUsers() {
        return this.checkUsers.map(item => item.nickName)
      },
      selectReviewUsers() {
        return this.reviewUsers.map(item => item.nickName)
      },
      selectCopyToUsers() {
        return this.copyToUsers.map(item => item.nickName)
      }
  },
  methods: {
    // 安检类型字典翻译
    safetyCheckOptFormat(row) {
      return this.selectDictLabel(this.safetyCheckOptOptions, row.safetyCheckOpt);
    },
    // 任务周期字典翻译
    taskCycleOptFormat(row) {
      return this.selectDictLabel(this.taskCycleOptOptions, row.taskCycleOpt);
    },
    // 整改报告字典翻译
    rectificationTypeOptFormat(row) {
      return this.selectDictLabel(this.rectificationTypeOptOptions, row.rectificationTypeOpt);
    },
    // 安检模板字典翻译
    safetyTemplateOptFormat(row) {
      return this.selectDictLabel(this.safetyTemplateOptOptions, row.safetyTemplateOpt);
    },
    // 周期版次字典翻译
    checkFrequencyOptFormat(row) {
      return this.selectDictLabel(this.checkFrequencyOptOptions, row.checkFrequencyOpt);
    },
    setCheckUsers(list) {	// 检查人员
			this.checkUsers = list
      this.form.checkUsers = '';
      list.forEach((item, index) => {
        if (index > 0) {
          this.form.checkUsers += ','
        }
        this.form.checkUsers += item.userId
      });
    },
    setReviewUsers(list) {	// 复核人员
			this.reviewUsers = list
      this.form.reviewUsers = ''
      list.forEach((item, index) => {
        if (index > 0) {
          this.form.reviewUsers += ','
        }
        this.form.reviewUsers += item.userId
      });
    },
    setCopyToUsers(list) {	// 抄送人员
      this.copyToUsers = list
      this.form.copyToUsers = ''
      list.forEach((item, index) => {
        if (index > 0) {
          this.form.copyToUsers += ','
        }
        this.form.copyToUsers += item.userId
      });
    },
    setCheckTargetOrgs(list) { // 检查对象
			this.checkTargetOrgs = list
      this.form.checkTargetOrgs = ''
      list.forEach((item, index) => {
        if (index > 0) {
          this.form.checkTargetOrgs += ','
        }
        this.form.checkTargetOrgs += item.orgId
      });
    },
		clearSelect(type) {
			switch (type) {
				case 'checkUsers':
					this.setCheckUsers([])
					break;
				case 'reviewUsers':
					this.setReviewUsers([])
					break;
				case 'copyToUsers':
					this.setCopyToUsers([])
					break;
				case 'checkTargetOrgs':
					this.setCheckTargetOrgs([])
					break;
				default:
					break;
			}
		},
    removeSelect(value) {
    },
		changeTaskCycleOpt(taskCycleOptVal) {
			if (taskCycleOptVal == "1") {
				this.$set(this.form, "checkFrequencyOpt", "1")
			} else {
				this.$set(this.form, "checkFrequencyOpt", "")
			}
		},
		changeCheckFrequencyOpt(checkFrequencyOptVal) {
			if (this.form.taskCycleOpt == "2" && checkFrequencyOptVal == "1") {
        this.msgError("重复任务周期，周期频次不能为无");
				this.$set(this.form, "checkFrequencyOpt", "")
			}
		},
		/** 提交按钮 */
		submitData(allFiles) {
			this.form.files = allFiles

			if (this.form.instanceId != null) {
				updateLabsafetyForm(this.form).then(response => {
					this.msgSuccess("修改成功");
					this.$emit("updateForm", response.data)
				});
			} else {
				addLabsafetyForm(this.form).then(response => {
					this.msgSuccess("新增成功");
					this.$emit("updateForm", response.data)
				});
			}
		}
  }
};
</script>
<style type="text/css" scoped>
  .form_long{
    width:556px;
  }
  .form_long1{
    width:556px;
  }
  .form_short{
    width:220px;
  }
  .el-button.active{
    text-decoration: underline;
    color: #0000ee;
  }
  .el-button.dis_active {
    color: #999999
  }
  .select_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .button_view {
      display: flex;
      align-content: center;
      justify-content: center;
  }
</style>
